import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
// 引入仓库方法
import { changeSize, thumeColor } from '@/store/modules/modules'
// 引入主题颜色
import { SketchPicker } from 'react-color'
// 引入对话框
import { Button } from 'antd';
// 引入页面样式
import '../../css/design/design.scss'
// 引入截图样式
import 'cropperjs/dist/cropper.css'
// 引入tab
import Tab from './EditorDragger/EditorTab/tab'
import Tabs from './EditorDragger/EditorTab/tabs'
// 引入子组件Cropping裁剪
import Cropping from './dragDrop_com/Cropping'
// 引入子组件Cutout抠图
import Cutout from './dragDrop_com/Cutout'

function dragDropBox_right() {
  // 获取仓库数据画布移入出现
  const currentcomponent = useSelector((state: any) => state.reducer.currentcomponent)
  const dispatch = useDispatch()
  // 定义颜色 直接定义一个颜色
  const [color, setColor] = useState<any>({ r: 255, g: 255, b: 255, a: 1.0 })
  // 裁剪对话框
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 抠图对话框
  const [isModalOpen2, setIsModalOpen2] = useState(false);
  // 宽高左侧高度距离
  const [formDate, setFormDate] = useState<any>({
    left: '',
    top: '',
    height: '',
    width: ''
  })

  useEffect(() => {
    dispatch(changeSize(formDate))
  }, [formDate])
  // 给要调整的宽高距离赋值
  useEffect(() => {
    if (currentcomponent && currentcomponent.style) {
      let { top, left, width, height } = currentcomponent.style
      setFormDate((prevState: any) => ({
        ...prevState,
        top: top, left: left, width: width, height: height
      }))
    }
  }, [currentcomponent])

  const handleChange = (e: any) => {
    let { value, name } = e.target
    setFormDate((prevState: any) => ({
      ...prevState,
      [name]: value
    }))
  }
  // 绑定出现主题颜色样式
  const handleChangeComplete = (color: any) => {
    setColor(color.rgb)
    dispatch(thumeColor(color))
  };
  // 声明变量盒子存储
  let content: any = ''

  //判断 
  if (currentcomponent !== null && currentcomponent.component == 'Dimg') {
    content = (
      <div>
        <Button type='primary' danger onClick={() => setIsModalOpen(true)}>裁剪</Button>
        <Button type='primary' onClick={() => setIsModalOpen2(true)} >扣图</Button>
      </div>
    )
  }

  return (
    <div>
      <Tabs>
        <Tab label="页面设置">
          <SketchPicker color={color} onChange={handleChangeComplete} />
        </Tab>
        <Tab label="按钮设置">
          <form>
            宽度: <input type="text" name='width' value={formDate.width} onChange={handleChange} /><br />
            高度: <input type="text" name="height" value={formDate.height} onChange={handleChange} /><br />
            top : <input type="text" name="top" value={formDate.top} onChange={handleChange} /><br />
            left: <input type="text" name="left" value={formDate.left} onChange={handleChange} /><br />
          </form>
          {/* 裁剪/抠图 */}
          {content}
          <Cropping isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
          <Cutout isModalOpen2={isModalOpen2} setIsModalOpen2={setIsModalOpen2} />
        </Tab>
        <Tab label="图片设置">图片</Tab>
      </Tabs>
    </div>
  )
}

export default dragDropBox_right
